<template>
  <div id="side-nav">
    <div class="toggle-btn" @click="toggleNav">
      <i class="iconfont icon-gengduo"></i>
    </div>

    <Menu
      theme="dark"
      :active-name="activeName"
      :width="!!navCollapse ? '62px': 'auto'"
      accordion
      @on-open-change="selectNav"
      @on-select="selectNav">
      <Submenu
        v-for="(item, index) in navs"
        :key="index"
        :name="item.name">

        <template slot="title">
            <i :class="item.icon"></i>
            {{ item.label }}
        </template>

        <MenuItem
          v-for="(item_child, index_child) in item.children"
          :key="index_child"
          :name="item_child.name">
            {{ item_child.label }}
        </MenuItem>
      </Submenu>
    </Menu>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import navs from './config'

  export default {
    name: 'app-side-nav',
    data () {
      return {
        activeName: '',
        navs
      }
    },
    computed: {
      ...mapGetters({
        navCollapse: 'navCollapse'
      })
    },
    methods: {
      selectNav (name) {
        if (typeof name === 'object' && name.length > 0) {
          name = name[0]
        }

        if (name.length > 0) {
          this.$router.push({ path: name })
        }
      },
      toggleNav () {
        this.$store.dispatch('collapseNav', !this.navCollapse)
      }
    },
    mounted () {
      // let matched = this.$route.matched
      // console.log(this.$route)
      // this.activeName = matched[1].path.replace('/activity/:activityId/', '')
    }
  }
</script>

<style lang="less">
  #app.nav-collapse {
    #side-nav {
      width: 62px;
      /* 折叠的时候固定高度 */
      .ivu-menu-submenu {
        height: 49px;
        overflow: hidden;
      }
      .iconfont {
        display: block;
        margin-bottom: 100px;
      }
    }
  }

  /* 默认不折叠 */
  #side-nav {
    position: absolute;
    width: 210px;
    top: 60px;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    background-color: #2e333b;
    transition: width .2s;
    transform: translateZ(0);
    z-index: 999;

    .toggle-btn {
      background: #51576A;
      padding: 9px 0 0 0;
      height: 35px;
      color: rgba(255, 255, 255, 0.8);
      text-align: center;
      cursor: pointer;
      .iconfont {
        font-size: 12px;
      }
    }

    .ivu-menu-dark {
      background-color: #2e333b;
      .ivu-menu,
      &.ivu-menu-vertical .ivu-menu-opened .ivu-menu-submenu-title {
        background: #0c0c0c;
      }
    }

    .ivu-menu-vertical .ivu-menu-submenu-title {
        padding: 14px 10px 14px 20px;
    }
  }
</style>
